<template>
	<view class="logistics">
		<uninavbar title="查看物流" leftIcon='leftIcon' rightIcon='' rightText="" />
		<view class="map"></view>
		<view class="logisticsview">


			<view class="logisticsInfo">
				<view class="logisticsInfoTop" >
					<view class="" v-if="expressData!=null">
						
					
						{{expressData.cpCode}} {{expressData.logisticsCompanyName}}
						<view class="logisticsInfoTopDesc"> {{expressData.logisticsStatusDesc}}</view>
						<view><text>快递号:{{expressData.mailNo}}</text></view>
						<view>
							<text>{{expressData.theLastMessage}}</text>
						</view>
					</view>
					<view class="nullList" v-else>
						<image src="/static/images/productDetails/nullList.png" mode=""></image>
						暂无物流信息
					</view>
				</view>
				<view class="logisticsList" v-for="(item,index) in logisticsTraceDetailList" :key='index'>
					<view :class="index==0?'tip tipShow':'tip'"></view>

					<view class="tipText">
						<view>
							<view class="" v-if="item.logisticsStatus=='WAIT_ACCEPT'">已发货</view>
							<view class="" v-if="item.logisticsStatus=='ACCEPT'">已揽收</view>
							<view class="" v-if="item.logisticsStatus=='TRANSPORT'">运输中</view>
							<view class="" v-if="item.logisticsStatus=='DELIVERING'">派件中</view>
							<view class="" v-if="item.logisticsStatus=='FAILED'">
								包裹异常
								<text class="" v-if="item.subLogisticsStatus=='REFUSE SIGN'">
									（拒收）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='DELVER ABNORMAL'">
									（派件异常）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='RETENTION'">
									（滞留件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='ISSUE'">
									（问题件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='RETURN'">
									（退回件）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='DAMAGE'">
									（破损）
								</text>
								<text class="" v-if="item.subLogisticsStatus=='CANCEL ORDER'">
									（揽件取消）
								</text>
							</view>
							<view class="" v-if="item.logisticsStatus=='SIGN'">已签收</view>
							<view class="" v-if="item.logisticsStatus=='RECEIVE'">已下单</view>
						</view>
						<text>{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
					</view>
					<!-- 	<view class="tipText"  v-else>
						<view>
							已下单1{{item.logisticsStatus}}
						</view>
						<text>
							{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
					</view> -->
					<text class="">
						{{item.desc}}
					</text>

					<!-- <view class="inDetail" @tap="popup()" v-if="index==0">详细信息></view> -->
				</view>

			</view>
			<!-- 	<view class="logisticsGoods">
				<view class="">
					芯娇晴旗舰店芯娇芯娇芯娇芯芯娇…备份
				</view>
				<view class="goodsInfo">
					<view class="goodsImg">
						<image src="/static/images/user/sj.png" mode="widthFix"></image>
					</view>
					<view class="goodsRight">
						<view class="goodsTitle">
							Apple/苹果 iPhone 14… <text>¥4699</text>
						</view>
						<view class="goodsType">
							机身颜色:白色;存储容量:64GB;网络类型:无需合约版;
						</view>
						<view class="goodsTip">
							<view class="">
								假一赔十
							</view>
							<view class="">
								7天无理由退款
							</view>

						</view>
						<view class="sendOut">
							发货时间:付款后4天内发货
						</view>
					</view>
				</view>

				<view class="goodsList">
					<view class="">
						商品总价
					</view>
					<view class="">
						¥288.00
					</view>

				</view>
				<view class="goodsList">
					<view class="">运费 </view>
					<view class=""> ¥0.00</view>
				</view>
				<view class="goodsList">
					<view class="">收货信息</view>
					<view class="">xxxxxxx</view>
				</view>
				<view class="goodsList">
					<view class="">下单时间</view>
					<view class="">2023-12-21 11:00</view>
				</view>
				<view class="goodsList">
					<view class="">订单编号： </view>
					<view class="goodsCode">256345879865<text>复制</text> </view>
				</view>
				<view class="goodsList actualPayment">
					<view class="">实付款 </view>
					<view class="num">¥ 4699.00</view>
				</view>
			</view> -->
		</view>
		<uni-popup class="logisticsPopup" :show="popupShow" @close="popupShow = false" ref="popup" type="bottom"
			borderRadius="10px 10px 0 0">
			<view class="popupTop">
				<view class="">
					详细信息
				</view>

				<view class="fastMail" v-if="expressData!=null">
					<image class="fastMailHead" src="" mode=""></image>
					{{expressData.logisticsCompanyName}} {{expressData.mailNo}}

					<image class="copy" src="/static/images/user/copy.png" mode="" @tap="goResult(expressData.mailNo)">
					</image>

				</view>
				<!-- 	<view class="fastMailText">
					{{expressData.theLastMessage}}
				</view> -->
			</view>

			<view class="logisticsview  popupView ">
				<view class="logisticsInfo popupInfo">
					<!-- 	<view class="logisticsList logisticsShow">
						<view class="tip tipShow">

						</view>
						<view class="tipText">已签收 08-10 10:43</view>
						<text class="">
							您已在深圳民治白石龙老村14栋店完成取件
						</text>
					</view> -->
					<view class="logisticsList" v-for="(item,index) in logisticsTraceDetailList" :key='index'>
						<view :class="index==0?'tip tipShow':'tip'"></view>

					<!-- 	<view class="tipText" v-if="index==0">
							<view>
								已下单
							</view>
							<text>
								{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
						</view> -->
						<view class="tipText">
							<view>
								<view class="" v-if="item.logisticsStatus=='WAIT_ACCEPT'">已发货</view>
								<view class="" v-if="item.logisticsStatus=='ACCEPT'">已揽收</view>
								<view class="" v-if="item.logisticsStatus=='TRANSPORT'">运输中</view>
								<view class="" v-if="item.logisticsStatus=='DELIVERING'">派件中</view>
								<view class="" v-if="item.logisticsStatus=='FAILED'">
									包裹异常
									<text class="" v-if="item.subLogisticsStatus=='REFUSE SIGN'">
										（拒收）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='DELVER ABNORMAL'">
										（派件异常）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='RETENTION'">
										（滞留件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='ISSUE'">
										（问题件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='RETURN'">
										（退回件）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='DAMAGE'">
										（破损）
									</text>
									<text class="" v-if="item.subLogisticsStatus=='CANCEL ORDER'">
										（揽件取消）
									</text>
								</view>
								<view class="" v-if="item.logisticsStatus=='SIGN'">已签收</view>
								<view class="" v-if="item.logisticsStatus=='RECEIVE'">已下单</view>
							</view>

							<text>{{dayjs(item.time).format('MM-DD hh:mm:ss')}}</text>
						</view>
						<text class="">
							{{item.desc}}
						</text>
						<!-- <view class="inDetail" @tap="popup()" v-if="index==0">详细信息></view> -->
					</view>


				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import uninavbar from '@/components/uni-nav-bar/uni-nav-bar.vue';
	import API from '@/config/newApi.js'
	export default {
		components: {
			uninavbar,
		},
		data() {
			return {
				popupShow: false,
				orderId: null,
				expressData: null,
				logisticsTraceDetailList: null
			}
		},
		onLoad(options) {
			this.orderId = options.orderId
			this.expressInfo()
		},
		methods: {
			goResult(data) {
				this.popupShow = false
				uni.setClipboardData({
					data: data, // 需要复制的内容
					success: () => {
						// 成功提示框显示 1 秒钟
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 1000
						});
					},
					fail: () => {
						// 失败提示框显示 1 秒钟
						uni.showToast({
							title: '复制失败，请重试',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			expressInfo: function() {
				let data = {
					orderId: this.orderId
					// orderId: 89
				}
				let args = {
					ContentType: 'application/x-www-form-urlencoded;charset=UTF-8'
				}
				API.expressInfo(data, args).then(res => {
						if (res.code == 200) {
							this.expressData = JSON.parse(res.data)
							this.logisticsTraceDetailList = this.expressData.logisticsTraceDetailList
						}
						console.log(this.expressData)
					})
					.catch(err => {
						console.log(err)
					})
			},
			popup(type) {
				// this.popupType = type
				this.popupShow = !this.popupShow
			},
		},

	}
</script>

<style scoped lang="scss">
	.map {
		width: 100%;
		height: 500rpx;
		background-color: #f1f1f1;
	}

	.logisticsPopup {
		::v-deep .uni-popup__wrapper-box {
			max-height: 1400rpx !important;
			border-radius: 20rpx 20rpx 0;
		}
	}

	.logisticsInfoTop {
		margin-bottom: 40rpx;
		position: relative;
		overflow: hidden;

		.logisticsInfoTopDesc {
			float: right;
			color: #6954D5;
		}

		text {
			font-size: 20rpx;
			color: #999;
		}
	}

	.logisticsview {
		padding: 40rpx;

		.logisticsInfo,
		.logisticsGoods {
			padding: 40rpx;
			background-color: #fff;
			margin-top: 40rpx;
			border-radius: 18rpx;

			.goodsInfo {
				display: flex;
				justify-content: space-between;
				margin-top: 20rpx;

				.goodsImg {
					background-color: #F3F2FC;
					border-radius: 18rpx;
					margin-right: 30rpx;
					display: flex;
					align-items: center;

					image {
						width: 200rpx;
						height: 200rpx;
					}
				}

				.goodsRight {
					font-size: 24rpx;
				}
			}
		}

		.logisticsGoods {
			padding: 30rpx 30rpx;
		}

		.logisticsInfo {
			margin-top: -120rpx;

			.logisticsList {
				line-height: 36rpx;
				padding-left: 20rpx;
				position: relative;
				padding-bottom: 40rpx;
				font-size: 22rpx;
				vertical-align: top;
				border-left: 2rpx solid #6954D5;

				.logisticsAddress {
					line-height: 40rpx;
				}

				.tipText {
					position: relative;
					top: -8rpx;
					font-size: 28rpx;
					color: #333;
				}

				.tip {
					width: 15rpx;
					height: 15rpx;

					border: 2rpx solid #6954D5;
					position: absolute;
					left: -10rpx;
					top: 0rpx;
					border-radius: 50%;
					background-color: #fff;
				}

				.tipShow {
					background-color: #6954D5;

				}

				.tipBtn {
					border: 2rpx solid #6954D5;
					margin-left: 20rpx;
					color: #6954D5;
					border-radius: 10rpx;
					padding: 0 10rpx;
				}

				.inDetail {
					position: absolute;
					right: -10rpx;
					top: -10rpx;
					color: #6954D5;
					font-size: 20rpx;
				}

				text {
					color: #999;
					font-size: 20rpx;
				}
			}

			.logisticsList:last-child {
				border-left: 2rpx solid #fff;
			}

			.logisticsShow {
				border-left: 2rpx solid #6954D5;

				.tipText {
					color: #6954D5;
				}
			}

		}

		.goodsRight {
			flex: 1;

			.goodsTitle {
				font-size: 26rpx;
				position: relative;

				text {
					margin-left: 20rpx;
					position: absolute;
					right: 0;
				}
			}

			.goodsType {
				width: 360rpx;
				color: #666;
				background: rgba(153, 153, 153, 0.1);
				border-radius: 4px;
				padding: 10rpx;
				font-size: 20rpx;
				margin: 5rpx 0;
			}
		}

		.goodsTip {
			display: flex;

			view {
				border-radius: 15rpx;
				border: #6954D5 2rpx solid;
				color: #6954D5;
				font-size: 20rpx;
				padding: 0 15rpx;
				margin-right: 10rpx;
				margin-top: 10rpx;
			}
		}

		.sendOut {
			color: #999;
			font-size: 20rpx;
			margin-top: 10rpx;
		}

		.goodsList {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10rpx 0;
			margin-top: 10rpx;

			.goodsCode {
				font-size: 26rpx;

				text {
					border-left: 2rpx solid #666;
					padding-left: 10rpx;
					margin-left: 10rpx;
				}
			}
		}

		.actualPayment {
			border-top: 1px solid rgba(221, 221, 221, 0.87);

			.num {
				color: #FF584B;
			}
		}

	}

	.popupTop {
		width: 100%;
		padding-bottom: 80rpx;
		text-align: center;
	}

	.popupView {

		.popupInfo {
			padding: 40rpx 0;

			.logisticsList {
				border-left: 2rpx solid #6954D5;
			}

			.logisticsList:last-child {
				border-left: 2rpx solid #fff;
				color: #6954D5;
			}

			.logisticsShow {
				border-left: 1px solid #6954D5;
			}
		}

	}

	.fastMail {
		display: flex;
		border-bottom: 2rpx solid #f1f1f1;
		padding: 20rpx 20rpx;
		align-items: center;
		position: relative;

		.fastMailHead {
			width: 50rpx;
			height: 50rpx;
			background-color: #999;
			border-radius: 50%;
			margin-right: 20rpx;
		}

		.copy {
			width: 25rpx;
			height: 25rpx;
			margin-left: 40rpx;
		}
	}

	.fastMailText {
		text-align: left;
		color: #999;
		font-size: 24rpx;
		padding: 20rpx 0;
	}
	.logisticsInfo{
		height:calc(100vh - 540rpx) ;
		overflow: auto;
	}
	.nullList{
		text-align: center;
		color: #999;
	}
</style>